// 光缆纤芯详情
<template>
  <el-dialog
    v-el-drag-dialog
    :title="title"
    :visible="dialogVisible"
    width="1200px"
    @close="close"
  >
    <div class="flex justify-end segment-list-box port-tip">
      <div class="port-status-list mr-10 color-select">
        选择
      </div>
      <div
        v-for="i in port_status"
        :key="i.value"
        class="port-status-list mr-10"
        :class="'color-' + i.value.toLowerCase()"
      >
        {{ i.label }}
      </div>
    </div>
    <div style="height: 400px;overflow:auto;">
      <div class="flex flex-wrap mt-20">
        <div
          v-for="(item, index) in fiberList"
          :key="index"
          class="flex align-center segment-list-box port"
        >
          <span class="port-name">{{ item.fiberName }}</span>
          <span
            class="topo-port port-id"
            :class="[
              `color-${item.status && item.status.toLowerCase()}`,
              { 'selected-port-link': item.selected }
            ]"
            @click="portClick(item, index)"
          />
        </div>
      </div>
    </div>
    <span slot="footer" class="flex justify-between align-center">
      <div class="flex-cloumn selected-port">
        <div>
          纤芯：{{
            selectedPortData && selectedPortData.fiberName
          }}
        </div>
        <div>
          所选纤芯对应业务名称与编码：{{
            !bizData ? '' : bizData.bizName + ' / ' + bizData.bizId
          }}
        </div>
      </div>
      <div>
        <el-button type="primary" @click="refresh">刷新</el-button>
        <el-button type="primary" @click="close">关闭</el-button>
      </div>
    </span>
  </el-dialog>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { port_status } from '@/enums/DevEnum.js'
  import cableData from "../data/cable.js"
  export default {
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      node: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        port_status,
        fiberList: [],
        selectedPortData: null,
        bizData: null
      }
    },
    computed: {
      ...mapGetters(['dictList']),
      title() {
        return `光缆-${this.node.label}`
      }
    },
    mounted() {
      console.log(this.node)
      this.getCablePort()
    },
    methods: {
      refresh() {
        this.getCablePort()
        this.selectedPortData = null
        this.bizData = null
      },
      getCablePort() {
        this.fiberList = []
        this.fiberList = cableData
      },
      // 端口点击事件
      portClick(currentPort) {
        this.bizData = null
        const selected = currentPort.selected
        // 若有选择端口则取消选中状态
        this.selectedPortData && (this.selectedPortData.selected = false)
        currentPort.selected = !selected
        if (!selected) {
          this.getBizInfo(currentPort)
          this.selectedPortData = currentPort
        } else {
          this.selectedPortData = null
        }
      },
      // 获取端口关联业务信息
      getBizInfo(fiberData) {
        // 空闲和成端的端口不查
        if (fiberData.status === 'IDLE' || fiberData.status === 'CONN') return
        console.log(fiberData.fiberId)
      },
      close() {
        this.$emit('update:dialogVisible', false)
      }
    }
  }
</script>
<style scoped lang="scss">
.port {
  .selected-port-link {
    background: #409eff;
  }
  margin-top: 20px;
  &-face {
    min-width: 25px;
    display: inline-block;
  }
  &-name {
    min-width: 30px;
    text-align: center;
    font-size: 12px;
    padding: 0 5px;
  }
  &-id {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    border: 1px solid #ccc;
    cursor: pointer;
  }
}
</style>
